<template>
    <view class="page__bd">
        <view class="hb-bar bg-white solid-bottom">
            <view class="action">
                <text class="hb-icon_title text-orange"></text>案例类卡片
            </view>
            <view class="action">
                <switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="onIsCard"></switch>
            </view>
        </view>
        <view class="hb-card case" :class="isCard?'no-card':''">
            <view class="hb-card__item shadow">
                <view class="image">
                    <image src="http://5b0988e595225.cdn.sohucs.com/images/20200103/0ff3880f4f9442b0b3b461ccdb4bcc85.jpeg"
                        mode="widthFix"></image>
                    <view class="hb-tag bg-blue">史诗</view>
                    <view class="hb-bar bg-shadeBottom"> <text class="hb-ellipsis">人为了达到正义的目的，尤其是当遭遇的对手比较没底线的时候，不得不做出一两件看起来不太高尚的事情。</text></view>
                </view>
                <view class="hb-list menu-avatar">
                    <view class="hb-list__item">
                        <view class="hb-avatar round lg" style="background-image:url(http://5b0988e595225.cdn.sohucs.com/images/20200103/0ff3880f4f9442b0b3b461ccdb4bcc85.jpeg);"></view>
                        <view class="content flex-sub">
                            <view class="text-grey">正义天使 罗宾</view>
                            <view class="text-gray text-sm flex justify-between">
                                十天前
                                <view class="text-gray text-sm">
                                    <text class="hb-icon_view margin-lr-xs"></text> 10
                                    <text class="hb-icon_good margin-lr-xs"></text> 20
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-orange"></text>
                文章类
            </view>
            <view class="action">
                <switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="onIsCard"></switch>
            </view>
        </view>
        <view class="hb-card article" :class="isCard?'no-card':''">
            <view class="hb-card__item shadow">
                <view class="title">
                    <view class="text-cut">生命中曾经有过的所有灿烂，原来终究，都需要用寂寞来偿还。</view>
                </view>
                <view class="content">
                    <image src="http://5b0988e595225.cdn.sohucs.com/images/20200103/0ff3880f4f9442b0b3b461ccdb4bcc85.jpeg"
                        mode="aspectFill"></image>
                    <view class="desc">
                        <view class="text-content">
                            无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</view>
                        <view>
                            <view class="hb-tag bg-red light sm round">傲娇</view>
                            <view class="hb-tag bg-green light sm round">距离</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isCard: false
            }
        },
        methods: {
            onIsCard(e) {
                this.isCard = e.detail.value
            }
        }
    }
</script>

<style>
    .page__bd {
        background-color: #f1f1f1;
    }
</style>
